<template>
  <div class="mastfoot">
    <div class="inner">
      <p>
        Formwork By
        <a 
          href="https://zh.nuxtjs.org/" 
          target="_blank">Nuxt.js</a>、
        <a 
          href="http://getbootstrap.com" 
          target="_blank">Bootstrap CSS</a>
        <br>Power by
        <a 
          href="https://github.com/JonChanGit" 
          target="_blank">@JonChanGit</a> .
        <br>
        <a 
          href="https://gitee.com/jonchan/personal_blog" 
          target="_blank">
          <img
            src="https://gitee.com/jonchan/personal_blog/widgets/widget_6.svg?color=265944"
            alt="Fork me on Gitee"
          >
        </a>
      </p>
    </div>
  </div>
</template>

<style lang="less" scoped>
/* 超小屏幕（手机，小于 768px） */
.mastfoot {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  .inner {
    padding: 30px;
    p {
      margin: 0 0 10px;
    }
  }
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
  .mastfoot {
    width: 100%;
    position: fixed;
    bottom: 0;
    .inner {
      padding: 30px;
      p {
        margin: 0 0 10px;
      }
    }
  }
}
</style>
